<template>
  <div>
    <!-- <DynamicScroller :items="items" :minItemSize="850" key-field="id" class="scroller" @scroll="handleScroll"> -->
    <!-- <template v-slot="{ item, index, active }"> -->
    <!-- <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.message]" :data-index="index" > -->
    <!-- 确保v-if条件正确 -->
    <mainNav :navBackgroundimg="navBackgroundimg"></mainNav>
    <!-- <Notice  :noticeList="noticeList" ></Notice>
          <aboutWe  :deptList="deptList" :aboutWeBackgroundimg="aboutWeBackgroundimg" ></aboutWe>
          <number  :numberList="numberList" :memberBackgroundimg="memberBackgroundimg"></number> -->
    <homeContent :bannerList="bannerList" :activitieList="activitieList" :announcementList="announcementList" :joinClubsList="joinClubsList"/>
    <myFooter />

    <!-- </DynamicScrollerItem> -->
    <!-- </template> -->
    <!-- </DynamicScroller> -->
  </div>
</template>

<script>
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
import Notice from "@/components/mainPage/Notice.vue";
import mainNav from "@/components/mainPage/mainNav.vue";
import number from "@/components/mainPage/number.vue";
import aboutWe from "@/components/mainPage/aboutWe.vue";
import homeContent from "@/components/mainPage/homeContent.vue";
import myFooter from "@/components/MyFooter.vue";
import { getIndexAll } from "@/api/homeService";
import { getAnnouncementList } from "@/api/cms/cms";

export default {
  data() {
    return {
      isY: true, // 初始值，当滚动到顶部时为 true
      navBackgroundimg: '', //首页大图背景图
      aboutWeBackgroundimg: '', //关于我们背景图
      memberBackgroundimg: [], //人物背景图
      noticeList: [], //通知列表
      activitieList: [], //活动列表
      announcementList: [], //公告列表
      bannerList: [], //轮播图列表
      numberList: [], //成员列表
      memberList: [], //优秀会员列表
      teachreList: [], //教师列表
      deptList: [], //部门列表
      joinClubsList: [], //社团列表
      items: [], // 列表数据
      itemSize: 100, // 初始值，将在mounted中更新
      isAboutWeAnimated: false, // 控制aboutWe动画是否已触发
      isNumberAnimated: false, // 控制number动画是否已触发
    };
  },
  components: {
    DynamicScroller,
    DynamicScrollerItem,
    number,
    aboutWe,
    Notice,
    mainNav,
    homeContent,
    myFooter,
  },
  created() {
    this.getIndexAll()
  },
  mounted() {
  },
  methods: {
    // handleScroll(event) {
    //   console.log(event);
    //   const scrollTop = event.target.scrollTop;
    //   if (scrollTop === 0) {
    //     this.isY = true;
    //   } else {
    //     this.isY = false;
    //   }
    //   this.$store.commit("updateY", this.isY);
    // },
    getIndexAll() {
      getIndexAll().then(async (res) => {
        console.log(res);

        if (res.code === 20000) {
          this.activitieList = res.data.activitieList.slice(0, 6);
          this.announcementList = res.data.announcementList;
          this.bannerList = res.data.bannerList;
          // this.memberList = res.data.memberList;
          // this.teacherList = res.data.teacherList;
          // this.deptList = res.data.deptList;
          this.joinClubsList = res.data.joinClubsList.slice(0, 6);
          
          //首页大图
          // this.navBackgroundimg = res.data.backgroundList[1]
          //关于我们字体图
          // this.aboutWeBackgroundimg = res.data.backgroundList[2]
          //人物背景图
          // this.memberBackgroundimg.push(...res.data.backgroundList.slice(0, 1).concat(res.data.backgroundList.slice(3, 7)));
        }
        //将活动和公告一起放入通知列表
        this.noticeList.push(this.activitieList);
        this.noticeList.push(this.bannerList);
        //将教师和优秀会员一起放入成员列表
        this.numberList.push(this.teacherList);
        this.numberList.push(this.memberList);
        this.noticeList.push(this.announcementList);
        this.updateItems();
      });
    },
    updateItems() {
      this.items = [
        { id: 1, type: "mainNav", navBackgroundimg: this.navBackgroundimg },
        { id: 2, type: "notice", noticeList: this.noticeList },
        { id: 3, type: "aboutWe", deptList: this.deptList, aboutWeBackgroundimg: this.aboutWeBackgroundimg },
        { id: 4, type: "number", numberList: this.numberList, memberBackgroundimg: this.memberBackgroundimg },
      ];
    },
    getItemHeight(item) {
      switch (item.type) {
        case "mainNav":
          return 825; // mainNav 的高度
        case "notice":
          return 905; // notice 的高度
        case "aboutWe":
          return 850; // aboutWe 的高度
        case "number":
          return 1208; // number 的高度
        default:
          return 0;
      }
    },
    
  },
};
</script>

<style scoped>
mainNav {
  position: relative;
}

.scroller {
  height: 100vh;
}
</style>
